<template>
  <view class="gg-block" v-bind:style="ggBoxStyle" @tap="onClick">
    <slot name="default" />
  </view>
</template>

<script>
export default {
  name: "GgBlock",
  options: {
    addGlobalClass: true,
  },
  props: {
    col: {
      type: [String, Number],
      default: ''
    },
    margin: {
      type: Number,
      default: 5
    },
    marginRight: {
      type: Number,
      default: 0
    },
    marginLeft: {
      type: Number,
      default: 0
    },
    marginTop: {
      type: Number,
      default: 0
    },
    marginBottom: {
      type: Number,
      default: 0
    }
  },
  inject: {
    ggGroupCol: {
      default() {
        return null
      }
    }
  },
  data() {
    return {
      ggBoxStyle: '',
      ggBoxMainStyle: {}
    };
  },
  created: function () {
    this._dealStyle();
  },
  methods: {
    _dealStyle() {
      let col = this.col ? this.col : this.ggGroupCol;
      let marginLeft = this.marginLeft ? this.marginLeft : this.margin;
      let marginRight = this.marginRight ? this.marginRight : this.margin;
      let marginTop = this.marginTop ? this.marginTop : this.margin;
      let marginBottom = this.marginBottom ? this.marginBottom : this.margin;
      let ggBoxStyle = ''
      if (col > 0) {
        ggBoxStyle += 'width: calc(100% / ' + col + ' - ' + (marginLeft + marginRight) + 'px);';
        ggBoxStyle += 'margin-left:' + marginLeft + 'px;';
        ggBoxStyle += 'margin-right:' + marginRight + 'px;';
        ggBoxStyle += 'margin-top:' + marginTop + 'px;';
        ggBoxStyle += 'margin-bottom:' + marginBottom + 'px;';
      }
      this.ggBoxStyle = ggBoxStyle;
    },
    onClick() {
      this.$emit('click')
    }
  }
};
</script> 
<style>
/* #ifdef MP-WEIXIN */
gg-block {
  display: contents;
}
/* #endif */

.gg-block {
  width: calc(100% - 10px);
  margin: 5px;
  display: inline-flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
</style>
